<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="中国移动网上商城,网上营业厅,话费查询,充话费,
    查流量 移动4G手机,移动合约机,移动4G套餐,移动业务办理,积分兑换"/>
    <meta name="description" content="中国移动网上商城为移动客户提供充值交费,
    账单查询,流量、4G套餐、宽带等业务介绍及办理,提供苹果、三星、
    小米等多款正品低价手机在线购买,让您足不出户,享受便捷移动服务！"/>
    <title>在线客服</title>

    <link rel="shortcut icon" href="images/favicon.ico"/>

    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/serviceBase.css">
    <link rel="stylesheet" href="css/serviceOnline.css">
    <script type="text/javascript" src="js/serviceOnline.js"></script>
</head>
<body>

<!--背景图模块 -->
<div>
    <img src="images/serviceOnlineBackground.png" alt="图片加载失败" width="100%" height="100%">
</div>

<!--chat模块-->
<div class="chat">
    <div class="chat-background-img">
        <img src="images/chatBackground.png" alt="图片加载失败" width="650" height="750">
    </div>
    <div class="chat-content">
        <div class="chat-head-portrait">
            <img id="chat-head-portrait-img" src="images/chatHeadPortrait.png" alt="图片加载失败" width="40" height="40">
        </div>
        <div class="chat-bubbles">
            <div class="chat-bubble-triangle" id="chat-bubble-triangle"></div>
            <div class="chat-bubble-rectangle" id="chat-bubble-rectangle"></div>
        </div>
        <div class="chat-content-text">
            <input type="text" id="chat-input" name="chat-input" placeholder="请输入您的问题" >
            <button id="chat-send" class="chat-send" onclick="sendMessage()">发送</button>
            <img src="images/chatAdd.png" alt="图片加载失败" width="30" height="30">
        </div>
    </div>
</div>

<!--footer模块-->
<footer class="footer">
    <p>copyright © 2024 移动公司 版权所有</p>
</footer>

</body>
</html>